<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>User - Logout</h2>
<p>Please click logout button, which will clean up all login cookies.</p>

<table>
    <tbody>
    <tr>
        <td>Way 1 - 通过前端JS清除登录的cookie信息</td>
        <td>
            <button id="btn_logout_js">请点击此按钮登出</button>
        </td>
    </tr>
    <tr>
        <td>Way 2 - 通过后端API清除登录的cookie信息</td>
        <td>
            <button id="btn_logout_api">请点击此按钮登出</button>
        </td>
    </tr>
    </tbody>
</table>

<ol>
    <li><a href="http://localhost:9002/index.html">UI Home</a></li>
    <li><a href="/login.html">Login</a></li>
    <li><a href="/">Go User Home</a></li>
</ol>

</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js"></script>
<script type="text/javascript">

    $("#btn_logout_js").click(function () {
        $.cookie('user_name', 'value', {
            expires: -1,
            path: '/',
            domain: 'localhost',
            secure: false
        });

        $.cookie('user_role', 'value', {
            expires: -1,
            path: '/',
            domain: 'localhost',
            secure: false
        });

        alert("已成功登出");
    });

    $("#btn_logout_api").click(function () {

        $.ajax({
            url: "/api/logout",
            type: "POST",
            data: null,
            processData: false,
            contentType: "application/json;charset=utf-8",
            success: function (data, status, ajax) {
                console.log("succeeded to logout.");
                let userName = $.cookie("user_name");
                let userRole = $.cookie("user_role");
                alert("已成功登出，用户登录的cookie信息已清除。");
            },
            fail: function () {
                console.log("fail to logout.");
                alert("登出失败");
            }
        });

    });

</script>
</html>